<script setup>

import {onMounted, ref} from "vue";
import {doDelete, doGet, doPost} from "../../util/request.js";
import {confirmMessage, showMessage} from "../../util/message.js";
import {useRouter} from "vue-router";
//路由对象
const router = useRouter()
//创建分页对象
let pageInfo = ref({})
//市场活动集合
const ClueList = ref([])


const loadData =(current)=>{
  //分页参数
  let params  =  {
    current:current,
  }
  doGet('/api/clue/page',params).then(resp => {
    if (resp.data.code === 200){
      ClueList.value = resp.data.data.list
      pageInfo.value = resp.data.data.total
    }else {
      showMessage("数据加载失败，请稍后重试"+resp.data.msg,"error")
    }
  })
}
//导入线索开关 弹出层
let addClueBut = ref(false)
const uploadRef =ref ({})
// 提交导入请求
const submitExcel = () => {
  uploadRef.value.submit()
}
const uploadExcel = (options) => {
  alert(options.action)
  let formData = new FormData()
  formData.append('file', options.file)
  doPost(options.action,formData).then(resp => {
    if (resp.data.code === 200){
      showMessage("导入成功","success")
      addClueBut.value = false
      loadData(1)
    }else {
      showMessage("导入失败"+resp.data.msg,"error")
    }
  })

}
//
const toDel = (id) => {

  confirmMessage('您确认要删除吗？').then(() => {
    doDelete('/api/clue/del/'+id).then(resp => {
      if (resp.data.code === 200){
        showMessage("删除成功","success")
        loadData(1)
      }else {
        showMessage("删除失败"+resp.data.msg,"error")
      }
    })
  })

}
let idArr = []
// 处理选中事件函数
const handleSelectionChange = (newSelection) => {
  idArr = []
  newSelection.forEach(item=>{
    idArr.push(item.id)
  })
  console.log(idArr)
}

// 批量删除用户
const toBatchDel = () => {
  // 判断用户是否选择了数据
  if (idArr.length <= 0) {
    showMessage('请选择要删除的数据!','warning')
    return
  }
  confirmMessage('您确定要批量删除吗？')
      .then(()=>{
        console.log("要删除的数据----- "+idArr)
        // 发送删除的请求
        doDelete('/api/clue/batch/'+idArr,{}).then(resp=>{
          if (resp.data.code === 200) {
            showMessage('删除成功！', 'success');
            // 刷新局部页面
            loadData(1)
          } else {
            showMessage('删除失败，原因：'+resp.data.msg,'error')
          }
        })
      })
}

onMounted(()=>{
  loadData(1)
})
// 跳转至编辑页面
const toEdit = (id) => {
  router.push('/index/clue/edit/'+id)
}
// 跳转至详情页面
const toDetail = (id) => {
  router.push('/index/clue/details/'+id)
}
</script>

<template>
  <!-- 按钮 -->
  <el-button type="primary" @click="router.push('/index/clue/add')">录入线索</el-button>
  <el-button type="success" @click="addClueBut = true">导入线索(Excel)</el-button>
  <el-button type="danger" @click="toBatchDel">批量删除</el-button>
  <!--表格-->
  <div class="table-ss">
    <el-table
        :data="ClueList"
        row-key="id"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="负责人" property="ownerName"  width="80"/>
      <el-table-column label="所属活动" property="activityName"  width="100"/>
      <el-table-column label="姓名" width="80" property="fullName"/>
      <el-table-column label="称呼" width="80" property="appellationName"/>
      <el-table-column label="手机" width="120" property="phone"/>
      <el-table-column label="微信" width="120" property="weixin"/>
      <el-table-column label="是否贷款" width="80" property="needLoanName"/>
      <el-table-column label="意向状态" width="80" property="intentionStateName"/>
      <el-table-column label="意向产品" width="80" property="intentionProductName"/>
      <el-table-column label="线索状态" width="80" property="stateName"/>
      <el-table-column label="线索来源" width="80" property="sourceName"/>
      <el-table-column label="下次联系时间" width="200" property="nextContactTime"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="toDetail(scope.row.id)">
            详情
          </el-button>
          <el-button type="success" size="small" @click="toEdit(scope.row.id)">
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="toDel(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-pagination background layout="prev, pager, next" :total=pageInfo @change="loadData"/>

  <el-dialog
      v-model="addClueBut"
      title="导入线索"
      width="500"
      :close-on-click-modal=false
      :show-close=false
      align-center
  >
    <el-upload

        ref="uploadRef"
        method="post"
        action="/api/clue/import"
        :http-request="uploadExcel"
        :auto-upload="false">
    >
      <el-button type="primary">选择Excel文件</el-button>
      <template #tip>
        <div class="el-upload__tip">
          支持 xlsx、xls格式的文件，且不超过500kb
        </div>
      </template>
    </el-upload>
    <el-button type="primary" @click="submitExcel">导 入</el-button>
    <el-button @click="addClueBut = false">取消</el-button>
  </el-dialog>


</template>

<style scoped>

</style>